<template>
  <ElRadioGroup v-bind="getAttrs">
    <ElRadioButton v-for="(item, index) in options" :key="index" :label="item[valueName]" :disabled="item[disabledName]">
      <component :is="item.render" v-if="item.render" v-bind="item"></component>
      <span v-else>{{ item[labelName] }}</span>
    </ElRadioButton>
  </ElRadioGroup>
</template>

<script setup lang="ts" name="RadioButtonGroup">
import { ElRadioButton, ElRadioGroup } from "element-plus";
import { computed, PropType, useAttrs } from "vue";
import { RadioButtonProps } from "./type";
import { omit } from "lodash";
defineProps({
  options: {
    type: Array as PropType<RadioButtonProps[]>,
    default: () => []
  },
  valueName: {
    type: String,
    default: "value"
  },
  labelName: {
    type: String,
    default: "label"
  },
  disabledName: {
    type: String,
    default: "disabled"
  }
});

const attrs = useAttrs();
const getAttrs = computed(() => {
  return omit(attrs, ["valueName", "labelName", "disabledName"]);
});
</script>

<style scoped></style>
